<template>
  <div>
    <tabbar></tabbar>

    <div class="content">
      <div class="notice" v-if="volunteerData">
        <van-notice-bar color="#1989fa" background="#fff" left-icon="info-o">
          {{volunteerData.notice.txt}}
        </van-notice-bar>
      </div>

      <Vlist :volunteerData="this.volunteerData"></Vlist>

      <div class="create">
        <h2>
          招募志愿者
        </h2>
        <div class="step">
          <!-- :active="active" -->
          <van-steps active-icon="success" active-color="#38f">
            <van-step>资料提交</van-step>
            <van-step>后台验证</van-step>
            <van-step>验证通过</van-step>
            <van-step>开始招募</van-step>
          </van-steps>
        </div>
        <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)" @click="tostart">发布我的项目</van-button>
      </div>
    </div>

    <end></end>
  </div>
</template>
<script>
import Vlist from './Volunteer/Vlist'
import Vue from 'vue';
import { NoticeBar, Step, Steps, Button } from 'vant';
Vue.use(NoticeBar).use(Step).use(Steps).use(Button);

import axios from 'axios' 
import {getProject} from '../api/Project'
export default {
  components: {
    Vlist
  },
  data () {
    return {
      volunteerData: {notice:'',address:[],data:[]},
      people: []
    }
  },
  created () {
   getProject().then(res => {
      this.volunteerData.data = res.data
      // console.log(this.volunteerData);
    })
   axios.get('/data/Volunteer.json').then(res=>{
     this.volunteerData.address = res.data.address
     this.volunteerData.notice = res.data.notice
   })

  },
  methods: {
    tostart () {
      this.$router.push('/startvolunteer')
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  width: 1200px;
  margin: auto;
  padding-bottom: 40px;
  .notice {
    width: 1000px;
    margin: auto;
    border-bottom: 1px solid #ccc;
  }

  .create {
    padding: 40px 40px 0;
    font-size: 18px;
    h2 {
      color: green;
    }
  }
}
</style>